<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>m.images | A Pelican Blog</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
  <link rel="stylesheet" href="static/m-dark.css" />
  <link rel="canonical" href="page.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header><nav id="navigation">
  <div class="m-container">
    <div class="m-row">
      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
    </div>
  </div>
</nav></header>
<main>
<article>
  <div class="m-container m-container-inflatable">
    <div class="m-row">
      <div class="m-col-l-10 m-push-l-1">
        <h1>m.images</h1>
<!-- content -->
<p>Image:</p>
<img class="m-image" src="./ship.jpg" />
<p>Image with link:</p>
<div class="m-image">
<a href="./ship.jpg"><img src="./ship.jpg" /></a>
</div>
<p>Image, class on top, custom alt:</p>
<img alt="A Ship" class="m-image m-fullwidth" src="./ship.jpg" />
<p>Image with link, class on top:</p>
<div class="m-image m-fullwidth">
<a href="./ship.jpg"><img src="./ship.jpg" /></a>
</div>
<p>Image with custom width, height and scale (scale gets picked):</p>
<img class="m-image" src="./ship.jpg" style="width: 384px" />
<p>Image with custom width and height (width gets picked):</p>
<img class="m-image" src="./ship.jpg" style="width: 300px" />
<p>Image with custom height:</p>
<img class="m-image" src="./ship.jpg" style="height: 100px" />
<p>Figure:</p>
<figure class="m-figure">
<img src="./ship.jpg" />
<figcaption>A Ship<div class="m-figure-description">
Yes.</div>
</figcaption>
</figure>
<p>Figure with link, scale and only a caption:</p>
<figure class="m-figure">
<a href="./ship.jpg"><img src="./ship.jpg" style="width: 568px" /></a>
<figcaption>A Ship</figcaption>
</figure>
<p>Figure with link and class on top:</p>
<figure class="m-fullwidth m-figure">
<a href="./ship.jpg"><img src="./ship.jpg" /></a>
<figcaption>A Ship</figcaption>
</figure>
<p>Figure with a width:</p>
<figure class="m-figure">
<img src="./ship.jpg" style="width: 250px" />
<figcaption>A Ship</figcaption>
</figure>
<p>Figure with a height:</p>
<figure class="m-figure">
<a href="./ship.jpg"><img src="./ship.jpg" style="height: 200px" /></a>
<figcaption>A Ship</figcaption>
</figure>
<p>Image grid, second row with a custom title and no title:</p>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 69.127%">
<a href="./ship.jpg"><img src="./ship.jpg" /><figcaption>F9.0, 1/250 s, ISO 100</figcaption>
</a>
</figure>
<figure style="width: 30.873%">
<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
</a>
</figure>
</div>
<div>
<figure style="width: 30.873%">
<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>A custom title</figcaption>
</a>
</figure>
<figure style="width: 69.127%">
<a href="./ship.jpg"><img src="./ship.jpg" /><div>
</div>
</a>
</figure>
</div>
</div>
<p>Image grid with a PNG file, JPEG with sparse EXIF data, JPEG with no EXIF data
and long exposure (&gt;1 second):</p>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 44.444%">
<a href="./tiny.png"><img src="./tiny.png" /><div>
</div>
</a>
</figure>
<figure style="width: 18.519%">
<a href="./sparseexif.jpg"><img src="./sparseexif.jpg" /><figcaption>F2.8</figcaption>
</a>
</figure>
<figure style="width: 18.519%">
<a href="./noexif.jpg"><img src="./noexif.jpg" /><div>
</div>
</a>
</figure>
<figure style="width: 18.519%">
<a href="./longexposure.jpg"><img src="./longexposure.jpg" /><figcaption>1.5 s</figcaption>
</a>
</figure>
</div>
</div>
<!-- /content -->
      </div>
    </div>
  </div>
</article>
</main>
</body>
</html>
